<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <title>CRUD</title>
</head>

<style>
    .table-group{
        margin-top: 200px;
        margin-left: 200px;
    }

    .table{
        width: 960px;
    }

    .form-contorl{
        width: 150px;
    }
</style>

<body>

    <!--新增模态框，等js根据选择填充-->
    <div class="modal" id="insertInputMod" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="h4title">请输入新增的人员信息</h4> 
                    <button class="close" data-dismiss="modal" onclick="clearMyInsert()">
                        <span>&times</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        工号：<input id="anum" class="form-contorl" placeholder=""/>
                        姓名：<input id="aname" class="form-contorl" placeholder=""/>
                    </div>
                    <div>
                        性别：<input id="asex" class="form-contorl" placeholder=""/>
                        密码：<input id="apasswd" class="form-contorl" placeholder=""/>
                    </div>
                    <div>
                        年龄：<input id="aage" class="form-contorl" placeholder=""/>
                        生日：<input id="abday" class="form-contorl" placeholder=""/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" onclick="insertInfo()">确定</button>
                    <button class="btn btn-default" data-dismiss="modal" onclick="clearMyInsert()">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!--编辑模态框，等js根据选择填充-->
    <div class="modal" id="changeInputMod" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="h4title">请编辑所选用户信息</h4> 
                    <button class="close" data-dismiss="modal" onclick="clearMyinput()">
                        <span>&times</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" onclick="changeInfo()">确定</button>
                    <button class="btn btn-default" data-dismiss="modal" onclick="clearMyinput()">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!--搞一个容器组-->
    <div class="table-group">
        <!--按钮、输入框-->
        <div>
            <button id="add" class="btn btn-info">新增</button>
            <button id="del" class="btn btn-info">删除</button>
            <button id="cha" class="btn btn-info">编辑</button>
            <button id="sea" class="btn btn-info">查询</button>
            <input id="num" class="form-contorl" placeholder="按工号查询"/>
            <input id="name" class="form-contorl" placeholder="按姓名查询"/>
        </div>
        <!--表格-->
        <table class="table table-striped">
            <thead>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </thead>
            <tbody>
                <tr>
                    <td id="1"><input type="checkbox" class="serial"></td>
                    <td>1001</td>
                    <td>张三</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>29</td>
                    <td>1991-1-1</td>
                </tr>
                <tr>
                    <td id="2"><input type="checkbox" class="serial"></td>
                    <td>1002</td>
                    <td>李四</td>
                    <td>男</td>
                    <td>1234</td>
                    <td>28</td>
                    <td>1992-1-1</td>
                </tr>
                <tr>
                    <td id="3"><input type="checkbox" class="serial"></td>
                    <td>1003</td>
                    <td>王五</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>27</td>
                    <td>1993-1-1</td>
                </tr>
                <tr>
                    <td id="4"><input type="checkbox" class="serial"></td>
                    <td>1004</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>26</td>
                    <td>1994-1-1</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/customer.js"></script>
</body>

</html>